<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<link
  rel="preload"
  href="https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
<style>
  #storybook-root {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  html {
    font-family: 'Inter', Helvetica, Arial, system-ui, sans-serif, 'Segoe UI',
      Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  }

  .sbdocs.sbdocs-content {
    max-width: 840px;
  }

  .docs-story {
    background: var(--cui-bg-normal);
  }

  /**
   * The selectors were copied from Storybook to avoid style leakage
   */

  /* Display (m) */
  .sbdocs :is(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)) {
    font-size: 3rem;
    line-height: 3.5rem;
    font-weight: bold;
  }
  /* Headline (l) */
  .sbdocs :is(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) {
    font-size: 2rem;
    line-height: 2.25rem;
    font-weight: semibold;
    border: none;
    margin-bottom: 1rem;
  }
  /* Headline (m) */
  .sbdocs :is(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) {
    font-size: 1.5rem;
    line-height: 1.625rem;
    font-weight: semibold;
  }
  /* Headline (s) */
  .sbdocs :is(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) {
    font-size: 1.125rem;
    line-height: 1.375rem;
    font-weight: bold;
  }
  /* Body (m) */
  .sbdocs :is(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
  .sbdocs :is(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
    font-size: 1rem;
    line-height: 1.375rem;
  }
  .sbdocs :is(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)) {
    text-decoration: underline;
    text-underline-position: under;
  }
  .sbdocs :is(em:not(.sb-anchor, .sb-unstyled, .sb-unstyled em)) {
    font-style: italic;
  }
  .sbdocs :is(strong:not(.sb-anchor, .sb-unstyled, .sb-unstyled strong)) {
    font-weight: 700;
  }
</style>
